<template>
	<view>
		<view class="top">
			<view class="title font-40 color-3">{{detail.title}}</view>
			<view class="tag">陪同过户</view>
			<view class="money">
				<text class="font-18">￥</text>
				<text class="font-bold">{{detail.price}}</text>
			</view>
		</view>
		<view class="icon-box">
			<view v-for="(item,index) in iconList" :key="index" class="item">
				<text :class="'iconfont '+item.icon"></text>
				<view>{{item.name}}</view>
			</view>
		</view>
		<view class="tabs">
			<u-subsection :list="list" :current="current" @change="sectionChange" activeColor="#ff4b32"
				mode="button"></u-subsection>
		</view>
		<view class="cell_box" v-if="current==0">
			<u-cell-group :border="false">
				<u-cell title="许可证类型" :value="detail.cate_title" title-style="color:#999999"></u-cell>
				<u-cell title="公司成立时间" :value="detail.reg_time" title-style="color:#999999"></u-cell>
				<u-cell title="许可证下证时间" :value="detail.pass_time" title-style="color:#999999"></u-cell>
				<u-cell title="许可证有效期" :value="detail.license_Time" title-style="color:#999999"></u-cell>
				<u-cell title="公司所属行业" :value="detail.industry" title-style="color:#999999"></u-cell>
				<u-cell title="地区" :value="detail.area" title-style="color:#999999"></u-cell>
				<u-cell title="纳税类型" :value="detail.tax_type==0?'一般纳税人':'小规模纳税人'" title-style="color:#999999"></u-cell>
				<u-cell title="注册资金" :value="detail.reg_capital" title-style="color:#999999"></u-cell>
				<u-cell title="公司是否异常" :value="detail.abnormaldata==0?'正常':'异常'" title-style="color:#999999"></u-cell>
				<u-cell title="经营范围" :value="detail.scope" title-style="color:#999999" :border="false"></u-cell>
			</u-cell-group>
		</view>
		<view class="cell_box" v-if="current==1">
			<u-cell-group :border="false">
				<u-cell title="公司名称" :value="detail.company_came" title-style="color:#999999"></u-cell>
				<u-cell title="许可证类型" :value="detail.cate_title" title-style="color:#999999"></u-cell>
				<u-cell title="是否为失信名单" :value="detail.dishonestdata==0?'否':'是'" title-style="color:#999999"></u-cell>
				<u-cell title="是否异常" :value="detail.abnormaldata==0?'正常':'异常'" title-style="color:#999999"></u-cell>
				<u-cell title="注册资金" :value="detail.reg_capital" title-style="color:#999999"></u-cell>
				<u-cell title="税务状态" :value="detail.tax_baddata==0?'正常':'异常'" title-style="color:#999999"></u-cell>

				<u-cell title="公司介绍" :value="detail.scope" title-style="color:#999999"></u-cell>
				<u-cell title="经营范围" :value="detail.scope" title-style="color:#999999" :border="false"></u-cell>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="box_title">卖家描述</view>
			<view class="content">
				{{detail.title}}
			</view>
		</view>
		<view class="box">
			<view class="box_title">购买流程</view>
			<view class="step">
				<view class="setp_item" v-for="item,i in steps1" :key="i">
					<text :class="'iconfont '+item.icon"></text>
					<view class="">{{item.name}}</view>
					<view class="arrow" v-if="i==0 || i==1 || i==3 || i==4">
						<u-icon name="more-dot-fill" color="#999" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="kefu">
					<u-icon name="server-man" color="#333" size="36"></u-icon>
					<text>响当当在线客服</text>
				</view>
				<view class="right">
					<view class="contact-box">
						<u-icon name="weixin-fill" color="#333" size="20"></u-icon>
						<text>微信问</text>
					</view>
					<view class="contact-box">
						<u-icon name="phone-fill" color="#333" size="20"></u-icon>
						<text>打电话</text>
					</view>
					<view class="pay" @click="goCreateOrder">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		httpAddress,
		getDetail
	} from '@/config/api.js'
	export default {
		data() {
			return {
				id: '',
				detail: {},
				iconList: [{
					name: "签订合同",
					icon: 'icon-hetong'
				}, {
					name: "担保交易",
					icon: 'icon-anquanbaozhang'
				}, {
					name: "提供证件",
					icon: 'icon-shiming'
				}, {
					name: "急速退款",
					icon: 'icon-lishi'
				}, {
					name: "线下支持",
					icon: 'icon-tea'
				}],
				list: ['店铺信息', '企业信息'],
				current: 0,
				steps1: [{
						icon: 'icon-shop-',
						name: '1.选择资质'
					}, {
						icon: 'icon-yinhangka',
						name: '2.支付定金'
					}, {
						icon: 'icon-dingdan',
						name: '3.核对信息'
					}, {
						icon: 'icon-xiaolian',
						name: '4.签订合同'
					},
					{
						icon: 'icon-jiaojie',
						name: '5.交接过户'
					}, {
						icon: 'icon-bianji1',
						name: '6.购买成功'
					}
				]

			}
		},
		onLoad(op) {

			this.id = op.id
			this.getData()
		},
		methods: {
			sectionChange(index) {

				this.current = index;
			},
			async getData() {
				const res = await getDetail({
					id: this.id
				})
				if (res.code == 1) {
					this.detail = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 去下单页
			goCreateOrder() {
				let data = {
					id: this.id,
					title: this.detail.title,
					price: this.detail.price
				}
				uni.navigateTo({
					url: '/pages/buy/createOrder?data=' + JSON.stringify(data)
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f4f5f8;
		padding-bottom: 150rpx;
	}
</style>
<style lang="scss" scoped>
	.top {
		padding: 30rpx;
		overflow: hidden;
		background: #fff;

		.title {
			line-height: 1.5em;
		}

		.tag {
			padding: 10rpx;
			margin: 20rpx 0;
			background-color: #f7f8f9;
			border-radius: 10rpx;
			width: fit-content;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 20rpx;
		}

		.money {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #ff2929;
			margin: 30rpx 0;
		}
	}

	.icon-box {
		background-color: #fff;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 40rpx 0;

		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 26rpx;
			color: #999;

			.iconfont {
				color: #c79863;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.tabs {
		padding: 0 60rpx;
	}

	.cell_box {
		background-color: #fff;
	}

	.box {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 40rpx;

		.box_title {
			font-size: 40rpx;
			color: #333;
			position: relative;

			&:before {
				content: '';
				display: box;
				position: absolute;
				left: -20rpx;
				top: 12rpx;
				width: 7rpx;
				height: 30rpx;
				background-color: #ff4b32;

			}
		}

		.content {
			font-size: 28rpx;
			color: #999;
			padding: 30rpx 20rpx;
			line-height: 1.5em;
		}

		.step {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;

			flex-wrap: wrap;

			.setp_item {
				width: 170rpx;
				height: 170rpx;
				border-radius: 50%;
				background-color: #f7f8f9;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #999;
				position: relative;
				margin-bottom: 60rpx;

				.iconfont {
					font-size: 50rpx;
				}

				.arrow {
					position: absolute;
					right: -34%;
					top: 40%;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		padding: 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.kefu {
			display: flex;

			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24rpx;
		}

		.right {
			display: flex;
			align-items: center;

			.contact-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #999;
				font-size: 24rpx;
				margin: 15rpx;
			}

			.pay {
				width: 220rpx;
				height: 80rpx;
				background-color: #ff2929;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
		}

	}
</style>